<script setup>
import {ArrowLeft, ArrowRight} from "@element-plus/icons-vue";
import {ref, watch, onMounted, defineProps} from "vue";
import ClassifyIn from "@/1-classify/classify-in.vue";
// 样式变化参数
const iconColorL = ref('gray')
const iconColorR = ref('gray')
const disableHoverL = ref(false)
const disableHoverR = ref(false)
const pageNumber = ref(10)
const pageNow = ref(1)
const fourth = ref('推荐排序')
const heightNum = ref(10)
const heightForClassifyIn = ref('250' * heightNum.value)

function heightNumX(data) {
  heightNum.value = data
  heightForClassifyIn.value = '250' * heightNum.value
}

// 加载时逻辑
onMounted(() => {
  if (pageNow.value === 1) {
    iconColorL.value = 'lightblue'
    disableHoverL.value = true
  }
  // if (props.countFind < 10) {
  //   iconColorR.value = 'lightblue'
  //   disableHover.value = true
  // }
  if (fourth.value === '推荐排序') {
    disableClick.value[1] = true
  }
})

// 样式变化函数
function onMouseEnterR() {
  iconColorR.value = 'black'
}

function onMouseLeaveR() {
  iconColorR.value = 'gray'
}

// 父组件传参
const props = defineProps({
  city: {
    type: String,
  },
  classify: {
    type: String,
  },
  time: {
    type: String,
  },
  countFind: {
    type: Number,
  },
})
// 父组件传参转换参数
const chooseData = ref({
  city: '全国',
  classify: '全部',
  time: '全部',
})
// 排序类型更改函数
const fourTop = ['相关度排序', '推荐排序', '最近开场', '最新上架']
const disableClick = ref(new Array(fourTop.length).fill(false))

function selectFourth(index) {
  disableClick.value.fill(false);
  disableClick.value[index] = true;
  fourth.value = fourTop[index];
}

//
watch(() => props.city, () => {
  chooseData.value.city = props.city;
})
watch(() => props.classify, () => {
  chooseData.value.classify = props.classify;
})
watch(() => props.time, () => {
  chooseData.value.time = props.time;
})
watch(() => props.countFind, () => {
  pageNumber.value = props.countFind;
  if (pageNumber.value < 10){
    disableHoverR.value = true;
    iconColorR.value = 'lightblue'
  } else {
    disableHoverR.value = false;
    iconColorR.value = 'gray'
  }
})
</script>

<template>
  <div class="top">
    <div class="top-four">
      <div class="top-four-in" @click="selectFourth(index)" :class="{ 'four-click': disableClick[index] }"
           v-for="(item, index) in fourTop"><a>{{ item }}</a>
      </div>
    </div>
    <div class="top-one">
    <span>
      <el-icon class="top-icon" :style="{color: iconColorL}" :class="{'no-hover': disableHoverL}"
               @mouseenter="onMouseEnterR"
               @mouseleave="onMouseLeaveR">
        <ArrowLeft/></el-icon>
      <b><a>{{ pageNow }}</a>/<a>{{ Math.ceil(props.countFind/10) }}</a></b>
      <el-icon class="top-icon" :style="{color: iconColorR}" :class="{'no-hover': disableHoverR}"
               @mouseenter="onMouseEnterR"
               @mouseleave="onMouseLeaveR">
        <ArrowRight/></el-icon>
    </span>
    </div>
  </div>
  <div :style="{height: heightForClassifyIn+'px'}">
    <classify-in :fourth="fourth" :chooseData="chooseData" @parentProp="heightNumX"></classify-in>
  </div>
  <div class="bottom">
    <div class="bottom-in">
      <div style="margin-top: 20px;width: 100%;display: flex;justify-content: right">
        <el-pagination background layout="prev, pager, next" :total="props.countFind"/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.four-click {
  color: deeppink;
  background-color: white;
  border-bottom: white 1px solid;
  z-index: 10;
  height: 100%;
}

.bottom {
  width: 100%;
  height: 75px;
  display: flex;
  justify-content: center;

  .bottom-in {
    height: 75px;
    width: calc(100% - 50px);
  }
}

.no-hover {
  pointer-events: none;
}

.top {
  width: 100%;
  height: 40px;
  background-color: whitesmoke;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: lightgray 1px solid;

  .top-one {
    font-size: 12px;
    display: flex;
    align-items: center;
    height: 40px;
    border-left: lightgray 1px solid;

    span {
      padding-left: 10px;
      padding-right: 10px;

      .top-icon {
        top: 2px;
        cursor: pointer;
      }

      b {
        color: black;
        font-weight: 500;
        padding-left: 10px;
        padding-right: 10px;
      }
    }
  }

  .top-four {
    display: flex;
    height: 40px;
    flex-direction: row;

    .top-four-in {
      border-right: lightgray 1px solid;
      font-size: 14px;
      display: flex;
      align-items: center;
      cursor: pointer;

      a {
        padding-left: 20px;
        padding-right: 20px;
      }
    }
  }
}
</style>